<template>
  <div class="prize-form-container">
    <el-card class="form-card" style="height: 800px">
      <div slot="header" class="clearfix">
        <div class="breadcrumb">
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/' }">
              <i class="el-icon-s-promotion"></i> 首页
            </el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/home/activity-list' }">
              <i class="el-icon-s-promotion"></i> 活动列表
            </el-breadcrumb-item>
            <el-breadcrumb-item>活动新建</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
      </div>

      <el-form :model="activity" label-width="100px" class="prize-form">
        <el-form-item label="活动名称">
          <el-input v-model="activity.name" placeholder="请输入奖品名称"></el-input>
        </el-form-item>
        <el-form-item label="活动图片">
          <el-input type="textarea" v-model="activity.img" placeholder="请输入图片路径"></el-input>
        </el-form-item>

        <el-form-item label="活动描述">
          <el-input type="textarea" v-model="activity.description" placeholder="请输入奖品描述"></el-input>
        </el-form-item>
        <el-form-item label="活动开始时间">
          <el-col :span="8">
            <el-date-picker type="date" placeholder="选择日期" v-model="startTime.date1"
                            style="width: 100%;"></el-date-picker>
          </el-col>
          <el-col class="line" :span="3">-</el-col>
          <el-col :span="8">
            <el-time-picker placeholder="选择时间" v-model="startTime.date2" style="width: 100%;"></el-time-picker>
          </el-col>
        </el-form-item>
        <el-form-item label="活动结束时间">
          <el-col :span="8">
            <el-date-picker type="date" placeholder="选择日期" v-model="endTime.date1"
                            style="width: 100%;"></el-date-picker>
          </el-col>
          <el-col class="line" :span="3">-</el-col>
          <el-col :span="8">
            <el-time-picker placeholder="选择时间" v-model="endTime.date2" style="width: 100%;"></el-time-picker>
          </el-col>
        </el-form-item>



        <el-form-item label="排序">
          <el-input v-model="activity.sort" type="number" placeholder="请输入排序"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button @click="goBack">返回</el-button>
          <el-button type="primary" @click="submitForm">提交</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import axios from "axios";
import moment from 'moment';
export default {
  data() {
    return {
      activity: {
        name: '',
        img: '',
        description: '',
        sort: '',
        startTime:'',
        endTime:''
      },
      startTime:{
        date1: "",
        date2:""
      },
      endTime:{
        date1: "",
        date2:""
      }
    };
  },

  methods: {
    goBack(){
      this.$router.push("/home/activity-list")
    },

    formatDateTime(date, time) {
      // 从完整的日期时间字符串中提取出日期部分和时间部分
      const datePart = moment(date).format('YYYY-MM-DD');
      const timePart = moment(time).format('HH:mm:ss');

      // 合并日期和时间部分
      const combinedDateTime = datePart + ' ' + timePart;

      // 使用 moment 解析格式化后的日期时间字符串
      const formattedDateTime = moment(combinedDateTime).format('YYYY-MM-DD HH:mm:ss');

      return formattedDateTime;
    },


    submitForm() {
      let startDateTime = this.formatDateTime(this.startTime.date1, this.startTime.date2);
      let endDateTime = this.formatDateTime(this.endTime.date1, this.endTime.date2);
      this.activity.startTime =startDateTime
      this.activity.endTime =endDateTime
      console.log(this.activity)
      axios.post("http://localhost:9090/draw/activity/save", this.activity, {
        headers: {
          'Content-Type': 'application/json'
        }
      }).then(
          response => {
            console.log(response)
            if (response.data.state==0){
              this.$message.success("新增成功");
              this.$router.push("/home/activity-list")
            }else {
              this.$message.error("新增失败")
            }
          }
      )
    }
  }
}
</script>

<style scoped>
.prize-form-container {

}

.breadcrumb {
  margin-bottom: 20px;
}

.form-card {

  padding: 20px;
}

.prize-form {
  width: 40%;
  margin-top: 20px;
}


</style>